<template>
	<div class="words-item-list yuwenPinyiWriteWords xjzxpy">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<template v-for="(elem, i) in item" :key="i">
				<div @click="useSelectItem(index, i)">
					<div class="word">
						<Words :text="elem.word" :size="size" :border-draw="false" />
					</div>
					<div class="words-inner">
						<text class="bracket">(</text>
						<div class="input">
							<text>{{ showResult(index, i) }}</text>
						</div>
						<text class="bracket">)</text>
					</div>
				</div>
			</template>
			
		</div>
	</div> 
</template>

<script setup>
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps({
	...Props,
	size: {
		type: Number,
		default: 8
	}
})
const showResult = (index, i) => {
	const result = props.result?.[index]
	return result ? props.result?.[index]?.[i] || '' : ''
}
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.words-item-list {
	display: flex;
	flex-wrap: wrap;
	:deep(.course-words-box) {
		background: none;
	}
	.words-item {
		margin-bottom: 1.6rem;
		width: 50%;
		font-size: 1.6rem;
		text-align: center;
		> div {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.is-active {
		background-color: $gray-ligh-7;
		border-radius: 0.4rem;
	}
	.bracket {
		line-height: 1;
	}
	.input {
		width: 7rem;
		height: 3.2rem;
		padding: 0 0.8rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.words-inner {
	display: flex;
	align-items: center;
	position: relative;
	top: -0.4rem;
}
</style>